class Dianming3 {


  // 获取添加成员按钮组对象
  public addStuEl: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('.addStu')
  // console.log(addStuEl);
  // 获取删除成员按钮组对象
  public closeBtnEl: NodeListOf<HTMLButtonElement> = document.querySelectorAll('.close-btn')
  // console.log(closeBtnEl);
  // 获取删除组按钮组对象
  public delGroupEl: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('.delGroup')
  // console.log(delGroupEl);

  public btnAddGroupEl = document.querySelector('.btn-addGroup') as HTMLButtonElement
  public stuInEl = document.querySelector('.stu-in') as HTMLDivElement





  // 向当前组添加组员 params:[事件对象,循环dom的索引值]
  addStuHander(e: Event, index: number) {
    console.log(`点击了第 ${index + 1} 个元素`);
    console.log('当前点击的元素对象是', e.target);
    let stuName = prompt('请输入学生姓名')

    // 要求:添加dom元素 使用 createElement 和 appendChild 来完成
    // 友情提示：有可能用到以下语法
    // const snode =  e.target.closest('类名').querySelector('选择器')
    // 创建li标签
    const e1: HTMLLIElement = document.createElement('li') as HTMLLIElement
    // 给li内部增加 html代码
    e1.innerHTML = `${stuName}<div class="close-btn"><span class="iconfont icon-close"></span>`
    // 给li 标签增加class 
    e1.classList.add('stu-item');


    // 事件对象

    // type：表示事件的类型，例如 "click"、"keydown"、"input" 等。
    // console.log(e.type, 'e.type');
    (e1.querySelector('.close-btn') as HTMLButtonElement).addEventListener('click', (e: Event) => {
      console.log('删除成员');
      // 这里可以添加你想要的点击事件处理逻辑


      this.delStuHander(e, index)

    });

    console.log(e1);
    // 获取 当前组下的 ul 元素
    const Etar = e.target as Element
    const EtarGroup = Etar.closest('.group') as HTMLDivElement
    const ulEl = EtarGroup.querySelector('ul') as HTMLUListElement
    // const ulEl = ((e.target as Element).closest('.group') as HTMLDivElement).querySelector('ul') as HTMLUListElement

    ulEl.appendChild(e1);
    // console.log(ulEl);


    // children: 属性，返回一个类数组对象，包含父元素的所有子元素。
    // 新加dom需要从新添加事件监听

  }


  // 删除成员（已完善，可以参考）[事件对象,循环dom的索引值]
  delStuHander(e: Event, index: number) {
    // console.log(`点击了第 ${index + 1} 个元素`);
    // console.log('当前点击的元素对象是', e.target);

    // 匹配选择器的最近的祖先元素
    const snode = (e.target as Element).closest('.stu-item');
    // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
    if (snode) {
      snode.remove(); // 使用 remove() 方法移除元素
    }
  }

  // 删除组
  delGroupHander(e: Event, index: number) {
    console.log(`点击了第 ${index + 1} 个元素`);
    console.log('当前点击的元素对象是', e.target);
    // 友情提示：和删除成员语法类似

    // 匹配选择器的最近的祖先元素
    const snode = (e.target as Element).closest('.group');
    // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
    if (snode) {
      snode.remove(); // 使用 remove() 方法移除元素
    }


  }



  addEventListenerHandler() {

    // 为每个元素添加点击监听器
    this.addStuEl.forEach((item, index) => {

      item.addEventListener('click', (e: Event) => {
        console.log('添加成员');
        // 这里可以添加你想要的点击事件处理逻辑
        this.addStuHander(e, index)

      });
    });

    // 为每个元素添加点击监听器
    this.closeBtnEl.forEach((item, index) => {
      item.addEventListener('click', (e: Event) => {
        console.log('删除成员');
        // 这里可以添加你想要的点击事件处理逻辑


        this.delStuHander(e, index)

      });
    });

    // 为每个元素添加点击监听器
    this.delGroupEl.forEach((item, index) => {
      item.addEventListener('click', (e: Event) => {
        console.log('删除组');
        // 这里可以添加你想要的点击事件处理逻辑
        this.delGroupHander(e, index)

      });
    });



    this.btnAddGroupEl.addEventListener('click', (event: Event) => {

      let divGroupEl1 = document.createElement('div');
      divGroupEl1.classList.add('group')

      let h3El1 = document.createElement('h3');
      h3El1.textContent = '第N组'

      let aEl1 = document.createElement('a');
      aEl1.innerHTML = '添加成员'
      aEl1.classList.add('addStu')
      aEl1.href = 'javascript:void(0)'
      aEl1.addEventListener('click', (e) => {
        console.log('添加成员');
        this.addStuHander(e, 0)

      });

      let aEl2 = document.createElement('a');
      aEl2.innerHTML = '删除组'
      aEl2.classList.add('delGroup')
      aEl2.href = 'javascript:void(0)'
      aEl2.addEventListener('click', (e) => {
        console.log('删除组');
        this.delGroupHander(e, 0)

      });

      h3El1.appendChild(aEl1)
      h3El1.appendChild(aEl2)
      divGroupEl1.appendChild(h3El1)
      let ulEl1 = document.createElement('ul');
      divGroupEl1.appendChild(ulEl1)



      this.stuInEl.appendChild(divGroupEl1)

    })
  }


}



export function groupHighlightEffect() {
  const h3AllEl = document.querySelectorAll('h3')
  h3AllEl.forEach(element => {
    element.addEventListener('mouseenter', (e) => {
      let liAll = ((e.target as Element).closest('.group') as Element).querySelectorAll('li')
      liAll.forEach(element => {
        element.classList.add('active')
      });

    })
  });

  h3AllEl.forEach(element => {
    element.addEventListener('mouseleave', (e) => {
      let liAll = (<Element>(e.target as Element).closest('.group')).querySelectorAll('li')
      liAll.forEach(element => {
        element.classList.remove('active')
      });

    })
  });
}


export default Dianming3

